<!--
 * @Author: 烟浮
 * @Date: 2022-06-26 00:46:42
 * @LastEditTime: 2022-06-26 02:23:08
 * @LastEditors: 锦墨涵秋 275740441@qq.com
 * @FilePath: /vite-ts-vue3/src/components/ProductList.vue
-->
<template>
  <div class="ProductList">
    <ul>
      <template v-for="item of productsStore.all">
        <li>
          {{ item.title }} - {{ item.price }}
          <hr />
          <button
            @click="cartStore.addProductToCart(item)"
            :disabled="!item.inventory"
          >
            添加到购物车
          </button>
        </li>
      </template>
    </ul>
  </div>
</template>
<script lang="ts" setup name="ProductList">
import { useCartStore } from "../store/cart";
import { useProductsStore } from "../store/products";

const productsStore = useProductsStore();
const cartStore = useCartStore();
// 加载所有数据
productsStore.loadAllProducts();
</script>
<style scoped lang="less"></style>
